<template>
    <div>
      <h2>各设备日平均能耗比例图(kwh)</h2>
      <div class="chart2" id="myEcharts">
          图表内容
      </div>
    </div>
  </template>
  
  <script>
  import {inject,onMounted,reactive} from "vue"
  export default {
    setup(){
      let $echarts=inject("echarts")
      let $http=inject("axios")

      let data=reactive({})

      async function getState(){
        data=await $http({url:"/three/data"})
      }
      onMounted(()=>{
        getState().then(()=>{
          console.log("饼状图",data)
          let myChart=$echarts.init(document.getElementById("myEcharts"))
          myChart.setOption({
            tooltip:{
              show:true
            },
            series:[
              {
                type:"pie",
                data:data.data.chartThree.chartData
              }
            ]
          })
        })
      })
      return {
        getState,data
      }
    }
  }
  </script>
  
  <style>
  .chart2{
    top:0.03rem;
  height: 2.7rem;
}
h2{
  height: 0.2rem;
  color: #0b5ae2;
  line-height: 0.25rem;
  text-align: center;
  font-size: 0.2rem;
}
  </style>